<template>
  <image src="@/static/images/04_ws.png" class="banner-img"></image>
  <view class="home" :style="{'padding-top':navHeight+'px'}">
    <view class="user u-flex-y-center" @click="$u.route('/pages/houseMine/editUser')">
      <image :src="prefixURL(data.userInfo.avatar)" class="user-avatar" mode=""></image>
      <view>
        <view class="user-name u-flex-y-center">
          <view>{{data.userInfo.nickname}}</view>
          <view class="user-tag">{{data.type_text}}</view>
        </view>
        <view class="user-phone">{{data.userInfo.mobile}}</view>
      </view>
    </view>
    <view class="user-action">
      <u-row>
        <u-col span="4" v-for="(item,index) in data.list" :key="index">
          <view class="action-item" @click="$u.route(item.page)">
            <image :src="item.image" mode=""></image>
            <view>{{item.name}}</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <u-text text="常用服务" margin="20rpx 0" color="#000" bold></u-text>
    <view class="menu-box">
      <u-row>
        <u-col span="3" v-for="(item,index) in data.menuList" :key="index">
          <view class="menu-item" @click="$u.route(item.page)">
            <image :src="item.image" mode=""></image>
            <view>{{item.name}}</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <u-text text="其他服务" margin="20rpx 0" color="#000" bold></u-text>
    <view class="menu-box">
      <u-row>
        <u-col span="3">
          <view class="menu-item u-flex-column u-flex-items-center" @click="$u.route('/pages/houseMine/mineFeedback')">
            <u-image width="52rpx" height="52rpx" :fade="false" src="@/static/images/04_aq.png" mode=""></u-image>
            <view class="u-m-t-16">意见反馈</view>
          </view>
        </u-col>
        <u-col span="3">
          <view class="menu-item  u-flex-column u-flex-items-center" @click="$u.route('/pages/houseMine/mineSet')">
            <u-image width="52rpx" height="52rpx" :fade="false" src="@/static/images/04_ku.png" mode=""></u-image>
            <view class="u-m-t-16">设置中心</view>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script setup>
  import {
    computed,
    onMounted,
    ref
  } from 'vue'
  import { userinfo } from '../../config/api';
  import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
  import { prefixURL, setCache } from '../../util/util';
  const navHeight = computed(() => uni.getSystemInfoSync().statusBarHeight + 30)
  const data = ref({
    menuList: [{
      name: '我的收藏',
      image: '/static/images/04_qq.png',
      page: '/pages/houseMine/myCollect'
    }, {
      name: '浏览记录',
      image: '/static/images/04_ww.png',
      page: '/pages/houseMine/houseHistory'
    }, {
      name: '看房管理',
      image: '/static/images/04_rr.png',
      page: '/pages/houseMine/houseReserve/houseReserve'
    }, {
      name: '我的奖励',
      image: '/static/images/04_aa.png',
      page: '/pages/houseMine/mineWallet'
    }, {
      name: '我的房源',
      image: '/static/images/04_ss.png',
      page: '/pages/houseMine/houseResources/houseResources'
    }, {
      name: '我的推荐',
      image: '/static/images/04_dd.png',
      page: '/pages/houseMine/mineCustom?type=4'
    }, {
      name: '积分商城',
      image: '/static/images/04_zz.png',
      page: '/pages/index/integralShop/integralShop'
    }, {
      name: '我的预定',
      image: '/static/images/04_ff.png',
      page: '/pages/houseMine/houseReserve/houseReserve'
    }],
    type: computed(() => data.value.userInfo?.user_type ?? 0),
    list: computed(() => {
      let array = []
      if (data.value.type == 0) {
        array = [{
          name: '我的房子',
          image: '/static/images/04_q.png',
          page: '/pages/houseMine/houseResources/houseResources'
        }, {
          name: '我的置业顾问',
          image: '/static/images/04_w.png',
          page: '/pages/houseMine/mineProperty'
        }, {
          name: '经纪人认证',
          image: '/static/images/04_e.png',
          page: '/pages/houseMine/mineBroker'
        }]
      } else if (data.value.type == 1) {
        array = [{
          name: '我的客户',
          image: '/static/images/04_5rf.png',
          page: '/pages/houseMine/mineCustom?type=1'
        }, {
          name: '我的团队',
          image: '/static/images/04_5wd.png',
          page: '/pages/houseMine/mineCustom?type=2'
        }, {
          name: '我的奖励',
          image: '/static/images/04_5nfg.png',
          page: '/pages/houseMine/mineWallet'
        }]
      } else {
        array = [{
          name: '推荐的经纪人',
          image: '/static/images/02_er.png',
          page: '/pages/houseMine/mineCustom?type=3'
        }, {
          name: '跟进的客户  ',
          image: '/static/images/04_w.png',
          page: '/pages/houseMine/followCustom'
        }, {
          name: '管理的房源',
          image: '/static/images/04_q.png',
          page: '/pages/houseMine/houseManage/houseManage'
        }]
      }
      return array
    }),
    userInfo: {},
    type_text: computed(() => {
      switch (+data.value.userInfo.user_type) {
        case 0:
          return '普通用户'
          break;
        case 1:
          return '经纪人'
          break;
        case 2:
          return '公司员工'
          break;
        default:
          return '普通用户'
          break;
      }
    })
  })
  onShareAppMessage(() => {})
  onShareTimeline(() => {})
  onShow(() => {
    _userinfo()
  })
  const _userinfo = () => {
    userinfo().then(res => {
      console.log(res)
      setCache('userInfo', res.data)
      data.value.userInfo = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 408rpx;
  }

  .home {
    padding: 0 28rpx;
    position: relative;
    z-index: 2;
  }

  .user {
    font-size: 36rpx;
    font-weight: 800;
    color: #fff;

    &-avatar {
      width: 124rpx;
      height: 124rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    &-phone {
      font-size: 24rpx;
      font-weight: 500;
      border-radius: 22rpx;
      background: rgba(0, 0, 0, .2);
      width: fit-content;
      padding: 4rpx 22rpx;
      margin-top: 16rpx;
    }

    &-tag {
      width: 112rpx;
      height: 36rpx;
      border-radius: 10rpx;
      border: 1rpx solid #FFFFFF;
      font-size: 22rpx;
      margin-left: 15rpx;
      text-align: center;
      line-height: 36rpx;
    }
  }

  .user-action {
    padding: 24rpx 0rpx;
    background: #FFFFFF;
    border-radius: 28rpx;
    margin-top: 44rpx;

    image {
      width: 88rpx;
      height: 88rpx;
      margin: auto;
      margin-bottom: 16rpx;
      display: block;
    }

    .action-item {
      text-align: center;
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }
  }

  .menu-box {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding-bottom: 30rpx;

    ::v-deep .u-row {
      flex-wrap: wrap;
    }

    .menu-item {
      text-align: center;
      font-size: 26rpx;
      font-weight: 500;
      color: #000;
      margin-top: 40rpx;

      image {
        width: 52rpx;
        height: 52rpx;
        display: block;
        margin: 0 auto 16rpx;

      }
    }
  }
</style>